<template>
  <div id="app">
    <div class="componentArea">
      <easyDisplay :tableName="tableName" :operations="operations">
        <!-- 自定义操作 -->
        <template #custom_operation="{tableData}">
          <el-button type="primary" plain size="small" @click="statistics(tableData.selectedRows)">
            <i class="el-icon-data-line el-icon--left"></i>
            统计
          </el-button>
        </template>
        <!-- 重写操作列内容 -->
        <!--<template #row-action="{row}">
          <el-button type="text" @click="showInfo(row)" size="small">查看</el-button>
        </template>-->
      </easyDisplay>
    </div>
  </div>
</template>

<script>
import easyDisplay from '@/components/easyDisplay.vue'

export default {
  name: 'App',
  components: {
    easyDisplay
  },
  data () {
    return {
      tableName: 'people',
      operations: ['add', 'batch_delete', 'custom_operation'],
    }
  },
  methods: {
    showInfo(row) {
      const h = this.$createElement;
      this.$notify({
        title: '原始数据',
        message: h('i', { style: 'color: teal'}, JSON.stringify(row))
      });
    },
    statistics(data) {
      this.$notify({
        title: '本页数据统计',
        dangerouslyUseHTMLString: true,
        message: `<span>
                    平均身高：${data.length > 0 ? data.reduce((sum, item) => sum + item.height, 0) / data.length : 0}
                  </span><br>
                  <span>
                    男：${data.filter(item => item.sex === 1).length}
                  </span><br>
                  <span>
                    女：${data.filter(item => item.sex === 0).length}
                  </span>`
      });
    }
  }
}
</script>

<style lang="sass">
body,html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: aquamarine;
}
#app {
  display: flex;
  width: 100%;
  height: 100%;
  .componentArea {
    display: flex;
    flex-direction: column;
    margin: 5%;
    height: 80%;
    width: 90%;
    padding: 1%;
    border-radius: 3px;
    background-color: white;
  }
}
</style>
